<template>
    <div id="mainbox">
        <span id="topword">最近生成的二维码</span>
        <span id="clearhis" @click="clearloc">清空记录</span>
            <div>
                <div class="onebox" v-for="(item,index) in hisarr.reverse()">
    <img class="hisimg" :src="item.img" alt="">
        <div class="histime">静态码 &nbsp;&nbsp;&nbsp;{{item.time}}</div>
          <span class='dele' @click="deletdata(index)">删除</span>    <a class="downimg" :href="item.img" :download="item.img">下载二维码</a>
        <div class="hisname">{{item.name}}</div>
                </div>
                    <el-empty v-if="$store.state.history==''" id="emptyimg" image-size="100" description="还没有任何记录哦"></el-empty>
            </div>
            
    </div>
</template>

<script>
import { onMounted } from '@vue/runtime-core'
export default {
    name:'History',
data(){
return{
    hisarr:this.$store.state.history
}},
methods:{
    clearloc(){
    // console.log( eval("(" + localStorage.getItem("vuex") + ")").history[0]);
      this.$store.state.history.splice(0,this.$store.state.history.length);
    window.localStorage.removeItem("vuex");
    // this.$store.state.history=localStorage.getItem("history");
},
    deletdata(index){
        this.$store.state.history.splice(index,1);
         window.localStorage.removeItem("vuex");
        window.localStorage.setItem("vuex",eval("(" + localStorage.getItem("vuex") + ")").history.splice(index,1))
}
}
}
</script>

<style scoped>
#emptyimg{
    position:relative;
    top: 10px;
}
    #mainbox{
    position: relative;
    left: 290px;
    width: 718px;
        }
#topword,#clearhis{
    position: absolute;
    top:0px;
    font-size: 14px;
    opacity: 0.8;
    cursor: default;
}
#clearhis{
    margin-left: 660px;
}
.onebox{
    position: relative;
top:30px;
    width: 100%;
    height: 80px;
    background-color:white; 
    margin-top: 20px;
display: flex;
    }
.hisimg{
    position: relative;
    left: 20px;
    width: 50px;
    height: 50px;
align-self: center;
}
.hisname{
    position: relative;
    top:20px;
    left:-125px;
    opacity: 0.9;
}
.histime{
    position:relative;
    font-size: 13px;
    top:50px;
    left: 50px;
    opacity: 0.5;
}
.dele{
    position: relative;
    font-size: 13px;
    top:50px;
    left: 450px;
    opacity: 0.7;
    cursor: default;
    }
.downimg{
    position: relative;
    font-size: 13px;
    top:40px;
    left: 480px;
    opacity: 0.7;
    cursor: default;
    color: black;
}
/* a{ color: black;} */
</style>